<template>
  <div class="app-container" >
    <div class="filter-container" align="center">
<!--      class="filter-item" -->
      <div v-for="item in comments"  >
        <div>{{item.name}}</div>
        <div>{{item.comment}}</div>
        <div>{{item.dateTime}}</div>
        <div @click="submit(item.commentId,item.name,item.commentId)">回复</div>
<!--        一般说到评论的父评论，这里用@-->
        <div v-for="c in item.children">
          <div>{{c.name}}
            <span v-if="c.parentId!=c.rootParentId" style="color: #20a0ff">@{{c.parentName}}</span>
            :{{c.comment}}
          </div>
          <div>{{c.dateTime}}</div>
<!--          <div @click="submit(c.commentId)">回复</div>-->
        </div>

<!--        这里为多级评论  也就是子级和子级之间的评论-->
        <div v-for="c in item.children">
          <div v-for="n in c.children">
            <div>{{n.name}}
              <span v-if="n.parentId!=n.rootParentId" style="color: #20a0ff">@{{n.parentName}}</span>
              :{{n.comment}}
            </div>
            <div>{{c.dateTime}}</div>
            <div @click="submit(c.commentId,c.name,c.rootParentId)">回复</div>
          </div>

        </div>
<!--      发送数据需要的input框-->
        <div v-if="isopen">
          <input type="text" v-model="comment.comment" placeholder="ph" ></input>
          <button type="button" @click="send()">发送</button>
        </div>



      </div>
    </div>



  </div>
</template>


<script>
import axios from "axios";

export default {
  name: "UserView",
  data() {
    return {
      ph:"请输入评论",
      isopen: false,
      comments:[], //所有的评论集合
      //发送回复评论对象
      comment:{
        userId:0,
        comment:"",
        dateTime:"",
        parentId:0,
        videoId:0,
        name:"",
        parentName:"",
        rootParentId:0,
      },



    }

  },
  // 前置执行方法在执行之前    beforeCreate()   axios.post(get)("http://localhost:8080/queryAll").then(...)
  created() { // 这是可以获取data中的数据后  再执行下面的axios
    this.getData()
  },
  methods: {
    //输入框赋值  需要从中间获取
    submit(parentId,parentName,rootParentId) {
          this.comment.parentId=parentId
          this.comment.parentName=parentName
          this.comment.rootParentId=rootParentId
          this.comment.dateTime=moment(new Date().getTime().format("YYYY-MM-DD HH:mm:ss"))
          this.isopen=true  //打开输入框
          this.ph="回复@"+parentName+":" //输入框默认值
    },
    //发送评论
    send(){
        axios({
          url: '/api/comment/addComment',
          method: 'post',
          data: this.comment,
          headers:{"Authorization":"Bearer "+this.$store.state.user.token}
        }).then(res => {
          console.log(res.data)
          if(res.data.code==1){
            this.isopen=false   //关闭输入框
            this.comment.comment="" //清空输入框
            this.getData()   //刷新数据
          }
        })

    },


    // 获取数据
    getData() {
      //查询
      axios({
        //获取所有的用户的信息和他们的角色信息
        url: '/api/comment/queryAllComment',
        method: 'post',
        // data: formData,
        headers:{"Authorization":"Bearer "+this.$store.state.user.token}
      }).then(res => {
        console.log(res.data.data[0].children)
        this.comments=res.data.data

      })
    },
    // 查询
    onSubmit() {
        // alert(this.state)
        // alert(this.pageInfo.username)
      this.pageInfo.pageNum = 1 // 点击查询时  页码重置为1
      this.getData()
    },
    // 确认勾选的用户id
    onAdd() {
      // this.$router.push('/user/UserAddView')
      this.$confirm('是否确认发送消息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        var formData = new FormData();
        formData.append("messages", this.message.messages)
        // console.log(formData)
        for (const Key in this.selection) {
          // console.log(Key)
          // console.log(this.selection[Key].id)
         formData.append("ids", this.selection[Key].id)
        }
        axios({
          url: '/api/messages/addMessages',
          method: 'post',
          data: formData,
          headers:{"Authorization":"Bearer "+this.$store.state.user.token}
        }).then(res => {
          console.log(res.data)
          if (res.data.code == 1) {
            this.$message({
              message: '发送成功',
              type:'success'
            });
            this.$refs.multipleTable.clearSelection();//清除已选
            this.getData()

          }
          else {
            this.$message({
              message: res.data.message,
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });

    },
    // this.$router.push({name:})
    selectionChange(val){
      this.selection=val
    },


  }


}
</script>

<style scoped>

</style>
